<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车案例</title>
    <style>
        table {
            border-collapse: collapse;
            text-align: center;
        }

        thead {
            background-color: #f2f2f2;
        }

        td,
        th {
            padding: 10px 16px;
            border: 1px solid #aaa;
        }
    </style>
</head>

<body>

    <div id="root"></div>

    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script src="./data.js"></script>
    <script src="./format.js"></script>

    <script type="text/babel">

        class App extends React.Component {
            constructor() {
                super();
                this.state = {
                    message: "Hello World",
                    books: books
                }
            }

            getTotalPrice() {
                return this.state.books.reduce((cur, {price, count}) => {
                    return cur + price * count;
                }, 0)
            }

            changeCount(index, count) {
                /*
                    一般不直接对state里面的数据进行修改，而是浅拷贝一份state里面的数据，然后修改拷贝数据之后去替换state里面的数据
                */
                const newBooks = [...this.state.books];
                newBooks[index].count += count;
                this.setState({ books: newBooks });
            }

            removeItem(index) {
                const newBooks = [...this.state.books];
                newBooks.splice(index, 1);
                this.setState({ books: newBooks });
            }

            renderBookList() {
                const { books } = this.state;
                return (
                    <div>
                        <table>
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>书籍名称</th>
                                    <th>出版日期</th>
                                    <th>价格</th>
                                    <th>购买数量</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    books.map((item, index) => {
                                        return (
                                            <tr key={item.id}>
                                                <td>{index + 1}</td>
                                                <td>{item.name}</td>
                                                <td>{item.data}</td>
                                                <td>{formatPrice(item.price)}</td>
                                                <td>
                                                    <button 
                                                        disabled={item.count <= 1} 
                                                        onClick={() => this.changeCount(index, -1)}
                                                    >
                                                        -
                                                    </button>
                                                    {item.count}
                                                    <button onClick={() => this.changeCount(index, 1)}>+</button>
                                                </td>
                                                <td>
                                                    <button onClick={() => this.removeItem(index)}>删除</button>
                                                </td>
                                            </tr>
                                        )
                                    })
                                }
                            </tbody>
                        </table>
                        <h2>总价格：{formatPrice(this.getTotalPrice())}</h2>
                    </div>
                )
            }

            renderBookEmpty() {
                return <div><h2>购物车为空，请添加书籍~</h2></div>
            }

            render() {
                const { books } = this.state;
                return books.length ? this.renderBookList() : this.renderBookEmpty();  
            }
        }

        const root = ReactDOM.createRoot(document.querySelector("#root"));
        root.render(<App />)
    </script>
</body>

</html>